<template>
  <div class="cart-list">
    <scroll class="content" ref="scroll">
      <!-- <li v-for="(item, index) in cartList" :key="index">{{item}}</li> -->
      <cart-list-item 
        v-for="(item, index) in cartList" 
        :key="index" 
        :product="item"/>
    </scroll>
  </div>
</template>

<script>
import Scroll from '@/components/common/scroll/Scroll.vue';

import CartListItem from './CartListItem';

import { mapGetters } from 'vuex';

export default {
  components: { 
    Scroll,
    CartListItem
  },
  name: "CartList",
  computed: {
    ...mapGetters(['cartList'])
  },
  activated() {
    this.$refs.scroll.refresh()
  }
}
</script>

<style scoped>
  .cart-list {
    height: calc(100% - 134px);
  }

  .content {
    height: calc(100% - 44px);
    overflow: hidden;
  }
</style>